<template>
  <div class="dialog-container">
    <el-dialog
      v-model="dialogVisible"
      :before-close="handleClose"
      title="绑定视频"
      width="40%"
    >
      <el-form label-position="left" label-width="100px">
        <div class="add">
          <el-button v-if="videoList.length < 3" @click="addItem">
            添加时段
          </el-button>
        </div>
        <div class="list">
          <div
            v-for="(videoItem, videoIndex) in videoList"
            :key="videoIndex"
            class="item"
          >
            <el-form-item label="视频列表">
              <template v-for="(item, index) in videoItem.videos" :key="index">
                <el-tag
                  class="tag"
                  closable
                  effect="plain"
                  @close="closeTag(item, videoItem.videos)"
                >
                  {{ item.CSVideoName }}
                </el-tag>
              </template>
              <el-button class="ml10" @click="addVideo(videoIndex)">
                添加视频
              </el-button>
              <!-- <el-button
                v-if="videoList.length > 1"
                @click="delVideo(videoIndex)"
              >
                删除时段
              </el-button> -->
            </el-form-item>
            <el-form-item label="时间区间">
              <el-date-picker
                v-model="videoItem.times"
                :disabled-date="disabledDate"
                end-placeholder="截图时间"
                range-separator="至"
                start-placeholder="开始时间"
                type="datetimerange"
              />
            </el-form-item>
            <el-icon
              v-if="videoList.length > 1"
              class="el-icon-delete"
              @click="delVideo(videoIndex)"
            >
              <CircleCloseFilled />
            </el-icon>
          </div>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
      <ChooseVideoDialog
        :videos="videoList[itemIndex]?.videos"
        :visible="chooseVideoDialogVisible"
        @close="chooseVideoDialogVisible = false"
        @confirm="chooseVideoDialogConfirm"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import ChooseVideoDialog from './chooseVideo.vue'
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  })
  const dialogVisible = ref(props.visible)
  watch(
    () => props.visible,
    () => {
      dialogVisible.value = props.visible
      if (props.visible) {
        videoList.value = [
          {
            videos: [],
            times: [new Date(), new Date()],
          },
        ]
      }
    }
  )

  // 时段
  const videoList: any = ref([
    {
      videos: [],
      times: [new Date(), new Date(new Date().getTime() + 24 * 60 * 60 * 1000)],
    },
  ])
  const getDay = () => {
    return new Date(new Date().setHours(0, 0, 0, 0))
  }
  const disabledDate = (time: Date) => {
    return getDay().getTime() > time.getTime()
  }
  const addItem = () => {
    videoList.value.push({
      videos: [],
      times: [new Date(), new Date(new Date().getTime() + 24 * 60 * 60 * 1000)],
    })
  }
  const delVideo = (index: number) => {
    videoList.value.splice(index, 1)
  }

  // 选择视频弹窗
  const itemIndex: any = ref(0)
  const addVideo = (index: number) => {
    itemIndex.value = index
    chooseVideoDialogVisible.value = true
  }
  const chooseVideoDialogVisible = ref(false)
  const chooseVideoDialogConfirm = (videos: any) => {
    chooseVideoDialogVisible.value = false
    videoList.value[itemIndex.value].videos.push(...videos)
  }

  // 删除tag
  const closeTag = (tag: string, videos: any) => {
    videos.splice(videos.indexOf(tag), 1)
  }

  const emit = defineEmits(['close', 'confirm'])
  const handleClose = () => {
    dialogVisible.value = false
    emit('close', dialogVisible.value)
  }
  const confirm = () => {
    console.log(videoList.value)
    for (let i = 0; i < videoList.value.length; i++) {
      const item = videoList.value[i]
      if (videoList.value[i].videos.length === 0) {
        ElMessage({
          message: `请在第${i + 1}项选择视频`,
          type: 'warning',
        })
        return
      }
      if (!videoList.value[i].times || videoList.value[i].times.length < 2) {
        ElMessage({
          message: `请在第${i + 1}项选择时间`,
          type: 'warning',
        })
        return
      }
    }
    emit('confirm', videoList.value)
    dialogVisible.value = false
  }
</script>

<style lang="scss" scoped>
  .table {
    .condition {
      margin-bottom: 20px;
      .color_494949 {
        color: #494949;
      }

      .w164 {
        width: 164px;
      }

      .mb20 {
        margin-bottom: 20px;
      }

      .mr14 {
        margin-right: 14px;
      }
    }
  }
  .tag {
    font-size: 14px;
  }

  .add {
    margin-bottom: 8px;
  }
  .list {
    .item {
      position: relative;
      border: 1px solid #ececec;
      padding: 10px 10px 0 10px;
      border-radius: 6px;
      margin-bottom: 12px;

      .el-icon-delete {
        position: absolute;
        font-size: 24px;
        right: -8px;
        top: -10px;
        cursor: pointer;
        color: red;
      }
    }
  }

  .ml10 {
    margin-left: 10px;
  }
</style>
